<template>
    <div>
      <el-table :data="booksData" tooltip-effect="light" :stripe=true :border=true>
        <el-table-column show-overflow-tooltip label="ID" min-width="40%" prop="id"></el-table-column>
        <el-table-column show-overflow-tooltip label="书名" min-width="40%" prop="book_name"></el-table-column>
        <el-table-column show-overflow-tooltip label="作者" min-width="40%" prop="author"></el-table-column>
        <el-table-column show-overflow-tooltip label="出版社" min-width="40%" prop="publisher"></el-table-column>
        <el-table-column show-overflow-tooltip label="出版时间" min-width="40%" prop="publish_time"></el-table-column>
        <el-table-column show-overflow-tooltip label="标签号" min-width="40%" prop="isbn"></el-table-column>
        <el-table-column show-overflow-tooltip label="类型" min-width="40%" prop="book_type"></el-table-column>
        <el-table-column label="借阅状态">
          <template slot-scope="scope">
            <span v-if="!scope.row.borrow_status">未被他人借阅</span>
            <span v-else>已被他人借阅</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="BorrowBook(scope.row)" type="text" size="small">借书</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total=totalItem>
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    name: "booktable",
    // 这边父组件的created函数中调用某个方法而方法会去请求接口，而这个请求是属于异步操作，此时会把异步操作放到消息队列中，等到后面的父子生命周期函数等一系列同步任务执行完成后，会执行异步任务。
    mounted() {
      //该例中数据在父组件拿到后才展示该组件部分、故可以放在created()中。正常应在数据更新后进行下列操作
      this.totalItem = this.tableData.length;
      let wholeTable = this.cloneObj(this.tableData); //编写时不希望组件内加一些编辑操作就会影响父页面数据；没有这个顾虑的话也可直接赋值
      this.allPages = [];
      for (let i = 0; i < wholeTable.length; i += this.pageSize) {
        this.allPages.push(wholeTable.slice(i, i + this.pageSize));
      }
      if (this.allPages.length > 0) {
        this.booksData = this.allPages[0];
      }
    },
    props: {
      //父组件传过来的参数
      tableData: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        booksData:this.tableData,
        currentPage: 1,
        totalItem: 0,
        pageSize: 5,
        showPage: [],
        allPages: [],
      };
    },
    methods: {
      BorrowBook(row){
                const borrowData = {
                    id: row.id,
                    book_name: row.book_name,
                    borrow_isbn: row.isbn,
                    borrow_status: row.borrow_status,
                    user_phone: sessionStorage.getItem("phone")
                }
                axios({
                    method: "post",
                    url: this.$root.businessServer + "borrowInfo/borrow",
                    data: borrowData,
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded",
                    },
                })
                .then(response=>{
                    if(response.data.message == "invalid licence")
                        alert("请先办理借阅证")
                    else if(response.data.message == "nolicence")
                        alert("您有违约记录，在违约期间直至将违约书籍全部还完后的三天您都不能借书")
                    else if(response.data.message == "licence status")
                        alert("请检查借阅证状态")
                    else if(response.data.message == "book has been borrowed")
                        alert("此书已被别人借走");
                    else if(response.data.message == "success")
                        alert("已借书成功");
                      })
                .catch(error=>{});
            },
      handleClick(row) {
        console.log(row);
      },
      //翻页操作
      handlePageChange(val) {
        this.currentPage = val;
        this.booksData = this.allPages[this.currentPage - 1];
      },
      //深度复制对象
      cloneObj(obj) {
        let newObj = {};
        if (typeof obj === "object") {
          if (obj instanceof Array) {
            newObj = [];
          }
          for (var key in obj) {
            let val = obj[key];
            newObj[key] = typeof val === "object" ? this.cloneObj(val) : val;
          }
          return newObj;
        } else {
          return obj;
        }
      },
    },
  };
  </script>
  
  <style>
  </style>
  